<template>
  <div class="container">
    <!-- 整体卡片区域 -->
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>{{$t('questionNew.title')}}</span>
  </div>
  <!-- 表单区域 -->
  <el-form ref="form" :model="form" label-width="80px" :rules="rules">
    <!-- 学科 -->
  <el-form-item  :label="$t('questionNew.subject')" prop="subjectID">
    <el-select @change="getDirectoryList" v-model="form.subjectID" :placeholder="$t('questionNew.PleaseChoice')">
    <el-option
      v-for="item in subject"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </el-form-item>
  <!-- 目录 -->
  <el-form-item :label="$t('questionNew.directory')" prop="catalogID">
    <el-select v-model="form.catalogID" :placeholder="$t('questionNew.PleaseChoice')">
    <el-option
      v-for="item in directory"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </el-form-item>
  <!-- 企业 -->
  <el-form-item :label="$t('questionNew.enterprise')" prop="enterpriseID">
    <el-select v-model="form.enterpriseID" :placeholder="$t('questionNew.PleaseChoice')">
    <el-option
      v-for="item in companys"
      :key="item.id"
      :label="item.company"
      :value="item.id">
    </el-option>
  </el-select>
  </el-form-item>
  <!-- 城市 -->
  <el-form-item :label="$t('questionNew.city')" prop="city">
    <city-picker @biankong="form.city = ''" @cityName='cityName(arguments)' v-model="form.city" />
  </el-form-item>
  <!-- 方向 -->
  <el-form-item :label="$t('questionNew.direction')" prop="direction">
    <el-select v-model="form.direction" :placeholder="$t('questionNew.PleaseChoice')">
    <el-option
      v-for="item in drictions"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
  </el-form-item>
  <!-- 题型 -->
  <el-form-item :label="$t('questionNew.topic')" prop="questionType">
    <el-radio-group @change="changeQuestionType" v-model="form.questionType">
    <el-radio label="1">{{$t('questionNew.one')}}</el-radio>
    <el-radio label="2">{{$t('questionNew.two')}}</el-radio>
    <el-radio label="3">{{$t('questionNew.three')}}</el-radio>
    </el-radio-group>
  </el-form-item>
  <!-- 难度 -->
  <el-form-item :label="$t('questionNew.difficulty')" prop="difficulty">
    <el-radio v-model="form.difficulty" label="1">{{$t('questionNew.simple')}}</el-radio>
    <el-radio v-model="form.difficulty" label="2">{{$t('questionNew.justSoSo')}}</el-radio>
    <el-radio v-model="form.difficulty" label="3">{{$t('questionNew.dead')}}</el-radio>
  </el-form-item>
  <!-- 题干 -->
  <el-form-item :label="$t('questionNew.questionStem')" prop="question">
    <quill-editor ref="text" v-model="form.question" class="myQuillEditor"><div class="one" v-highlight></div></quill-editor>

  </el-form-item>
  <!-- 选项 -->
  <el-form-item v-if="isShow !== '3'" :label="$t('questionNew.options')">
    <!-- 单选框部分 -->
    <div v-if="isShow === '1'">
      <div class="options" v-for="(item,index) in form.options" :key="index">
      <el-radio v-model="radio" :label="index">{{item.code}}:</el-radio>
      <el-input v-model="form.options[index].title" class="title_input"></el-input>
      <upload-image :limit="1" @imgUrl='imgUrl($event,index)' />
    </div>
    </div>
    <!-- 多选框部分 -->
    <div v-if="isShow === '2'">
      <div class="options" v-for="(item,index) in form.options" :key="index">
      <el-checkbox v-model="form.options[index].isRight">{{item.code}}:</el-checkbox>
      <el-input v-model="form.options[index].title" class="title_input"></el-input>
      <upload-image :limit="1"/>
    </div>
    </div>
    <el-button :disabled="addBtn" @click="pushData" type="danger" >{{$t('questionNew.addOrAnswer')}}</el-button>
  </el-form-item>
  <!-- 解析视频 -->
  <el-form-item :label="$t('questionNew.ParsingVideo')">
    <el-input class="videojiexi" size="medium" v-model="form.videoURL"></el-input>
  </el-form-item>
  <!-- 答案解析 -->
  <el-form-item :label="$t('questionNew.answerParse')" prop="answer">
    <quill-editor  ref="text" v-model="form.answer" class="myQuillEditor"><div class="one" v-highlight></div></quill-editor>

  </el-form-item>
  <!-- 题目备注 -->
  <el-form-item :label="$t('questionNew.TitleNotes')">
    <el-input
      class="tmbz"
      type="textarea"
      :rows="6"
      :placeholder="$t('questionNew.PleaseEnterTheContent')"
      v-model="form.remarks">
    </el-input>
  </el-form-item>
  <!-- 试题标签 -->
  <el-form-item :label="$t('questionNew.PaperLabel')">
    <el-select multiple  v-model="joinTags" :placeholder="$t('questionNew.PleaseChoice')">
    <el-option
      v-for="item in textTags"
      :key="item.value"
      :label="item.label"
      :value="item.label">
    </el-option>
  </el-select>
  </el-form-item>
  <!-- 提交按钮 -->
  <el-form-item><el-button type="primary" @click="onSubmit" >{{$t('questionNew.ConfirmToSubmit')}}</el-button></el-form-item>
  </el-form>
</el-card>
    <!-- /整体卡片区域 -->
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
import 'quill/dist/quill.snow.css'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as directorySimple } from '@/api/hmmm/directorys.js'
import { simple as tagsSimper } from '@/api/hmmm/tags.js'
import { list as companysList } from '@/api//hmmm/companys.js'
import { add as addQuestions } from '@/api//hmmm/questions.js'
export default {
  name: 'QuestionNew',
  watch: {
    // 更改isRight的值
    radio: {
      handler (val, oldval) {
        if (oldval === '你北子哥') {
        } else {
          this.form.options[oldval].isRight = false
        }
        this.form.options[val].isRight = true
      }
    },
    joinTags: {
      deep: true,
      handler (val) {
        // console.log(val)
        this.form.tags = val.join(',')
      }
    },
    'form.question': {
      handler (val) {
        if (val === '') {
          this.$refs.form.validateField('question')
        } else {
          this.$refs.form.clearValidate('question')
        }
      }
    },
    'form.answer': {
      handler (val) {
        if (val === '') {
          this.$refs.form.validateField('answer')
        } else {
          this.$refs.form.clearValidate('answer')
        }
      }
    },
    'form.city': {
      handler (val, oldval) {
        if (val === oldval) {
          this.$refs.form.validateField('city')
        }
      }
    }
  },

  components: {
    quillEditor
  },

  data () {
    return {
      form: {
        answer: '',
        subjectID: '',
        catalogID: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        direction: '',
        videoURL: '',
        province: '',
        city: '',
        tags: '',
        options: [
          {
            code: String.fromCharCode(65),
            title: '',
            img: '',
            isRight: false
          },
          {
            code: String.fromCharCode(66),
            title: '',
            img: '',
            isRight: false
          },
          {
            code: String.fromCharCode(67),
            title: '',
            img: '',
            isRight: false
          },
          {
            code: String.fromCharCode(68),
            title: '',
            img: '',
            isRight: false
          }
        ]
      },
      joinTags: '',
      subject: [],
      directory: [],
      companys: [],
      textTags: [],
      drictions: ['o2o', '外包服务', '企业服务', '互联网金融', '企业咨询', '互联网', '电子商务', '其他'],
      radio: '你北子哥',
      asscii: 69,
      isShow: '1',
      addBtn: true,
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: ['blur', 'change'] }],
        catalogID: [{ required: true, message: '请选择目录', trigger: ['blur', 'change'] }],
        enterpriseID: [{ required: true, message: '请输入企业', trigger: ['blur', 'change'] }],
        city: [{ required: true, message: '请选择地区', trigger: ['blur', 'change'] }],
        direction: [{ required: true, message: '请选择方向', trigger: ['blur', 'change'] }],
        questionType: [{ required: true, message: '请输入活动名称', trigger: ['blur', 'change'] }],
        difficulty: [{ required: true, message: '请输入活动名称', trigger: ['blur', 'change'] }],
        question: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      }
    }
  },

  created () {
    this.getSubjectSimple()
    this.getCompanysList()
  },

  methods: {
    // 获取简单学科列表
    async getSubjectSimple () {
      const res = await simple()
      this.subject = res.data
    },
    // 根据学科id获取简单目录列表
    async getDirectoryList () {
      const res = await directorySimple(this.subject)
      this.directory = res.data
      console.log(res)
      // 获取简单标签列表 还不知道是干嘛用的
      const { data } = await tagsSimper(this.subject)
      this.textTags = data
      // console.log(data)
    },
    // 获取企业管理列表
    async getCompanysList () {
      const res = await companysList({ pagesize: 10000 })
      this.companys = res.data.items
      // console.log(res)
    },
    // 改变题型
    changeQuestionType (val) {
      console.log(val)
      this.isShow = val
      this.$nextTick(_ => {
        if (val === '2') {
          this.addBtn = false
        } else {
          this.addBtn = true
        }
      })
    },
    // 添加选项
    pushData () {
      this.form.options.push({
        code: String.fromCharCode(this.asscii),
        title: '',
        img: '',
        isRight: false
      })
      this.asscii++
    },
    // 添加图片url
    imgUrl (e, index) {
      // console.log(index)
      // console.log(e)
      this.form.options[index].img = e
    },
    // 选择城市
    cityName (msg) {
      console.log(msg[0])
      console.log(msg[1])
      this.form.city = msg[0]
      this.form.province = msg[1]
    },
    // 提交表单
    onSubmit () {
      this.$refs.form.validate((flag, obj) => {
        if (!flag) return
        addQuestions(this.form)
        this.$router.push('/questions/list')
        this.$message.success('试题录入成功')
      })
    }

  }

}
</script>

<style scoped lang="less">
.container{
  padding: 20px;
  .myQuillEditor{
    height: 200px;
    margin-bottom: 30px;
  }
  .options{
    display: flex;
    padding-bottom: 20px;
    align-items: center;

    .el-radio{
      margin: 0;
    }
    .title_input {
      width: 240px;
      margin: 0 10px;
    }
  }
}
.myQuillEditor{
  // overflow: hidden;
  padding: 30px;
}
.videojiexi{
  width: 200px;
  margin-left: 30px;
}
.tmbz{
  width: 500px;
}
</style>
